<template>
	<view>
		<Tabs :tabsC="tabsC" @bindhandleItemChange="handleItemChange">
		    <block v-if="tabsC[0].isActive">
				<view class="classifyBtn">
					<view class="itemBtn" v-for="(item,index) in itemBtnList">
						<u-button type="primary" shape="circle" color='#fd4f02' size='normal' :plain="item.plain" :text="item.text" @click='clickEvent(index)'></u-button>
					</view>
				</view>
				<goodsList :goodsList="goodsList"></goodsList>
				<block v-if="classifyId==3">
					<!-- <goodsList :goodsList="goodsList"></goodsList> -->
					<view class="myPublishList"  v-for="(item,index) in Booklist1" :key="index">
						
				<view class="progress_block" v-if="item.status==2||item.status==3">
						<view class="name">
							 {{item.book_name.length>19?item.book_name.substr(0,16)+'...':item.book_name}}
						</view>
						<view class="creataTime">
							发布时间： {{item.create_time}}
						</view>
						<view class="isbn">
							ISBN： {{item.isbn}}
						</view>
						<!-- <view class="price">
							 出售价格：{{item.price}}
						</view> -->
						<!-- <view class="statusBut">
							<u-button v-if="item.status==3"    text="暂停匹配"  size="normal"    color="red"    ></u-button>
							<u-button v-if="item.status==1"    text="已完成"    size="normal"    color="green"    ></u-button>
							<u-button v-if="item.status==2"    text="匹配中"    size="normal"    color="blue"    ></u-button>
						</view> 蓝色下架图标http://1.14.247.152:9797/images/15500下架.png-->
						<view class="statusBut statusBut1">
							<image  src="http://1.14.247.152:9797/images/16615xiajia.png" mode="widthFix" @click="soldOutFun(item,index)"></image>
							<!-- <image v-if="item.status==1" src="http://1.14.247.152:9797/images/16512lianxi-yixiajia.png" mode="widthFix" @click=""></image> -->
							<view  class="bookNumber">
								×{{item.amount}}
							</view>
						</view>
						
					</view>
				</view>
				<view class="bgImg" v-if="isEmpty">
					<image src="http://1.14.247.152:9797/images/10480空箱子.png" mode="widthFix"></image>
				</view>
				</block>
				
			</block>
			
			
			
		    <block v-if="tabsC[1].isActive">
				<soldOutList :soldOutList="soldOutList"></soldOutList>
				
				<view class="history">
					<view class="myPublishList"  v-for="(item,index) in Booklist1" :key="index">
						<view class="progress_block" v-if="item.status==1">
						<view class="name">
							 {{item.book_name.length>19?item.book_name.substr(0,16)+'...':item.book_name}}
						</view>
						<view class="creataTime">
							发布时间： {{item.create_time}}
						</view>
						<view class="isbn">
							ISBN： {{item.isbn}}
						</view>
						<!-- <view class="price">
							 出售价格：{{item.price}}
						</view> -->
						<!-- <view class="statusBut">
							<u-button v-if="item.status==3"    text="暂停匹配"  size="normal"    color="red"    ></u-button>
							<u-button v-if="item.status==1"    text="已完成"    size="normal"    color="green"    ></u-button>
							<u-button v-if="item.status==2"    text="匹配中"    size="normal"    color="blue"    ></u-button>
						</view> -->
						<view class="statusBut">
							<!-- <image v-if="item.status==2||item.status==3" src="http://1.14.247.152:9797/images/15500下架.png" mode="widthFix" @click="soldOutFun(item,index)"></image> -->
							<image  src="http://1.14.247.152:9797/images/16512lianxi-yixiajia.png" mode="widthFix" @click=""></image>
							<view  class="bookNumber">
								×{{item.amount}}
							</view>
						</view>
						
					</view>
					</view>
				</view>
					
				
			</block>
		</Tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Booklist:[],
				classifyId1:0,
				goodsList:[],
				soldOutList:[],
				itemBtnList:[
				{text:'全部',plain:false},
				{text:'生活用品',plain:true},
				{text:'体育器材',plain:true},
				{text:'学习用品',plain:true},
				{text:'其它',plain:true}]
			}
		},
		computed:{
			classifyId:{
				get(){
					console.log('000000000')
					return this.classifyId1;
				},
				set(value){
					console.log('有人修改classifyId了：',value)
				}
			},	
			Booklist1: {
				get() {
					console.log('get调用了！！！')
					return this.Booklist
					
				},
				set() {
					this.$forceUpdate()
				}},
			isEmpty:{
				get(){
					let data = this.Booklist1.filter((item)=>item.status==2||item.status==3)
					if(data.length>0){
						return false;
					}else{
						return true;
					}
					console.log('this.isEmpty',this.isEmpty)
				},
				set(){
					
				}
			},	
			tabsC:{
				get(){
					return [
				{
					id:0,
					name:"发布",
					isActive:true
				},
				{
					id:1,
					name:"历史",
					isActive:false
				}
			]
				},
				set(){
					this.$forceUpdate()
				}
				
			}
		},
			onLoad(){
					this.getPubMes();
			},
			async onShow(){
				// let vm = this
				// let header = new Object
				// header.Authority = getApp().globalData.Authority
				// console.log('header.Authority:',header.Authority)
				this.getClassifyGoods(0);
				this.getSoldOutGoods()
				 
			},
			methods: {
				async getSoldOutGoods(){
					let header = new Object
					header.Authority = getApp().globalData.Authority
					let res = await getApp().UniRequest('/twohandbook/goods/authority/mine/history?Authority='+header.Authority,'GET','',header)
					console.log('获取下架商品信息',res)
					if(res.code==20000){
						this.soldOutList=res.data.list;
					}
					
				},
				clickEvent(index){
					console.log('索引：：：',index)
					 this.classifyId1=index;
					 this.getClassifyGoods(index)
					 this.itemBtnList.forEach((item,i)=>{
						 if(i==index){
							 item.plain=false
						 }else{
							 item.plain=true
						 }
					 })
					 
				},
				async getClassifyMes(){
					let header = new Object
					header.Authority = getApp().globalData.Authority
					let res = await getApp().UniRequest('/twohandbook/goods/classify','GET','',header)
					console.log('获取分类res',res)
				},
				async getClassifyGoods(index){
					console.log('getClassifyGoods里面的参数index',index)
					let header = new Object
					header.Authority = getApp().globalData.Authority
					let res = await getApp().UniRequest('/twohandbook/goods/authority/mine?Authority='+header.Authority,'GET','',header)
					console.log('获取发布的商品信息',res.data.list)
					if(res.code==20000){
						this.goodsList = res.data.list.filter((item,i)=>item.classifyId==index)
						console.log('this.goodsList',this.goodsList)
					}
				},
				handleItemChange(index){
					console.log('父组件接收到的index',index);
					var arr = this.tabsC
					console.log(this.tabsC)
					this.tabsC = arr.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
				
				},
					
				async soldOutFun(item,index){
					let batch = item.batch;
					let header = new Object
					header.Authority = getApp().globalData.Authority
					// let res = await getApp().UniRequest('/twohandbook/sellBookRecord/authority/soldOutMySell?batch='+batch,'GET','',header)
					wx.showModal({
					  title: '提示',
					  content: '是否确认下架?',
					  success: async(res)=> {
					    if (res.confirm) {
							let data = await getApp().UniRequest('/twohandbook/sellBookRecord/authority/soldOutMySell?batch='+batch,'GET','',header)
							console.log('WWWWWWWWWW ',data)
							if(data.code==20000){
								this.Booklist1=this.Booklist1.forEach((item,index1)=>{
								if(index==index1){
									item.status = 1;
									console.log(index1,'被点击了！')
								}
					      })
								wx.showToast({
								  title: '下架成功',
								  icon: 'success',
								  duration: 800
								})
							}
					    } else if (res.cancel) {
						  console.log('点击了取消')
					    }
					  }
					})
					// console.log('res!!!!',res)
					
				},
				async getPubMes(){
					uni.showLoading({
						title: '加载中'
					})
					let header = new Object
					header.Authority = getApp().globalData.Authority
					let res = await getApp().UniRequest('/twohandbook/sellBookRecord/authority/mySell','GET','',header)
					console.log('res$$$$$$$$$$$$$$$',res)
					if(res.code==20000){
						uni.hideLoading()
						this.Booklist=res.data.data
					}
					console.log('我的发布里面的res',res)
					
					
					console.log("this.Booklist：res.data.data",this.Booklist)
					// this.Booklist=this.Booklist.filter((item,index,self)=>{
					// 	var flag;
					// 	for(var i=0;i<3;i++){
					// 		if(self[i].banci==item.banci&&i==index){
					// 			// return true;
					// 			flag = true;
					// 		}else {
					// 			// return false;
					// 			flag = false;
					// 		}
					// 	}
					// 	return flag;
					// })
					// this.Booklist.forEach(Element=>{
					// 	switch(Element.status){
					// 		case 1:return Element.statu="已完成" 
					// 		case 2:return Element.statu="匹配中" 
					// 		case 3:return Element.statu="暂停匹配" 
					// 	}
					// })
				} 
			}
	}
</script>

<style lang="scss">
	.history{
		margin-top: 28rpx;
	}
	// .myPublishList{
		
	// }
	.classifyBtn{
		display: flex;
		width: 100%;
		margin: 28rpx auto;
		justify-content: space-between;
		.itemBtn{
			// padding: 2rpx;
			// width: 110rpx;
		}
		
	}
	.progress_block {
		width: 93%;
		margin: auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		height: 200rpx;
		position: relative;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			.name {
				position: absolute;
				top: 15rpx;
				height: 20%;
				font-size: 35rpx;
				font-weight: 800;
				margin-bottom: 50rpx;
				left: 4%;
			}
			.creataTime{
				position: absolute;
				top: 153rpx;
				font-size: 28rpx;
				left: 4%;
				font-weight: 500;
			}
			.isbn{
				position: absolute;
				top: 86rpx;
				left: 4%;
				font-size: 34rpx;
			}
			.price{
				position: absolute;
				top:60%;
				left: 68%;
				font-size: 34rpx;
			}
			.statusBut{
				display: flex;
				width: 21%;
				position: absolute;
				left: 78%;
				top: 43%;
				image{
					width: 100%;
				}
				.bookNumber{
					width: 100%;
					height: 100%;
					text-align: center;
					font-size: 32rpx;
					line-height: 100%;
					padding: 23rpx 0rpx;
					border-radius: 21rpx;
				}
				}
				.statusBut1{
					top: 33%;
					}
		}
	
.u-page {
		&__button-item {
			width: 25%;
			margin: 0 15px 15px 0;
		}
	}
	.bgImg{
		width: 76%;
		margin: 100rpx auto;
		image{
			width: 100%;
			
		}
	}
	.u-safe-area-inset-bottom {
	     padding-bottom: 0; 
	}
</style>
